(function(){
  const secondHand = document.querySelector('.second-hand');
  const minsHand = document.querySelector('.min-hand');
  const hourHand = document.querySelector('.hour-hand');

  function setData() {
    const now = new Date();
    const seconds = now.getSeconds();
    const mins = now.getMinutes();
    const hour = now.getHours();
    console.log(hour + ':' + mins + ':' + seconds);

    const secondsDegress = ((seconds / 60) * 360) + 90;
    secondHand.style.transform = `rotate(${secondsDegress}deg)`

    const minsDegress = ((mins / 60) * 360) +((seconds / 60) * 6) + 90;
    minsHand.style.transform = `rotate(${minsDegress}deg)`

    const hourDegress = ((hour / 12) * 360 + ((mins / 60) * 30)) + 90;
    hourHand.style.transform = `rotate(${hourDegress}deg)`

    if(secondsDegress === 90){
      secondHand.style.transition = 'all 0s'
    }
  }
  setInterval(setData,1000);
  setData();
})();